<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.box,.box1{
			width: 200px;
			height: 200px;
			background-color: #0f0;
		}
		
		.box1{
			background-color: red;
			/* padding: 40px; */
			padding: 20px 40px 60px 80px;
			
			
			
			/* border: 10px solid #ccc; */
			/* border-width: 20px;
			border-style: solid;
			border-color: #000; */
			/* border-top: 20px dashed #000; */
			
			/* margin: 20px; */
			/* margin:20px 40px 60px 80px; */
			
			
			/* outline: 20px solid #00f; */
		}
		
		input{
			border: 0;
			outline: 0;
		}
	</style>
</head>

<body>
	<pre>
			主要任务： 盒模型（Box Model）
			元素实际占的位置：
			    宽：内容的宽+左右内边距+左右边框+左右外边距
			    高：内容的高+上下内边距+上下边框+上下外边距
			内容(content)：盒子的内容，用于显示文本，图片   width height
			内边距(padding)：内容到边框的距离  透明色  
			边框(border)：围绕在内边距的边框
			外边距(margin)：盒子与另外一个盒子之间的距离  透明色   
			
			内边距：padding：10px 20px 30px 40px
			
			padding	        使用简写属性设置在一个声明中的所有填充属性
			padding-bottom	设置元素的底部填充
			padding-left	设置元素的左部填充
			padding-right	设置元素的右部填充
			padding-top	    设置元素的顶部填充
			    length	    规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
			    %	        规定基于父元素的宽度的百分比的填充
			    inherit	    指定应该从父元素继承padding
			    一个值（上下左右） 两个值（上下  左右）  三个值（上  左右  下）  四个值（上  右  下  左）
			
			外边距：margin
			margin	        简写属性。在一个声明中设置所有外边距属性。
			margin-bottom	设置元素的下外边距。
			margin-left	    设置元素的左外边距。
			margin-right	设置元素的右外边距。
			margin-top	    设置元素的上外边距。   
			    auto	    浏览器计算外边距。
			    length	    规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
			    %	        规定基于父元素的宽度的百分比的外边距。
			    inherit	    规定应该从父元素继承外边距。
			    一个值（上下左右） 两个值（上下  左右）  三个值（上  左右  下）  四个值（上  右  下  左）
			
			边框：border
			border	            简写属性，用于把针对四个边的属性设置在一个声明。
			    可以设置的属性分别（按顺序）：border-width, border-style,和border-color  style必需
			border-style	    用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
			    none	定义无边框。
			    hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
			    dotted	定义点状边框。在大多数浏览器中呈现为实线。
			    dashed	定义虚线。在大多数浏览器中呈现为实线。
			    solid	定义实线。
			    double	定义双线。双线的宽度等于 border-width 的值。
			    groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
			    ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
			    inset	定义 3D inset 边框。其效果取决于 border-color 的值。
			    outset	定义 3D outset 边框。其效果取决于 border-color 的值。
			    inherit	规定应该从父元素继承边框样式。
			border-width	    简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
			    thin	定义细的边框。
			    medium	默认。定义中等的边框。
			    thick	定义粗的边框。
			    length	允许您自定义边框的宽度。
			    inherit	规定应该从父元素继承边框宽度。
			border-color	    简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
			    color	    指定背景颜色。在CSS颜色值查找颜色值的完整列表
			    transparent	指定边框的颜色应该是透明的。这是默认
			    inherit	    指定边框的颜色，应该从父元素继承
			border-bottom	    简写属性，用于把下边框的所有属性设置到一个声明中。
			border-bottom-color	设置元素的下边框的颜色。
			border-bottom-style	设置元素的下边框的样式。
			border-bottom-width	设置元素的下边框的宽度。
			border-left	        简写属性，用于把左边框的所有属性设置到一个声明中。
			border-left-color	设置元素的左边框的颜色。
			border-left-style	设置元素的左边框的样式。
			border-left-width	设置元素的左边框的宽度。
			border-right	    简写属性，用于把右边框的所有属性设置到一个声明中。
			border-right-color	设置元素的右边框的颜色。
			border-right-style	设置元素的右边框的样式。
			border-right-width	设置元素的右边框的宽度。
			border-top	        简写属性，用于把上边框的所有属性设置到一个声明中。
			border-top-color	设置元素的上边框的颜色。
			border-top-style	设置元素的上边框的样式。
			border-top-width	设置元素的上边框的宽度。
				
			border:1px solid #ccc;
			
			轮廓：outline   轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
			    可以设置的属性分别是（按顺序）：outline-width, outline-style, outline-color 
			outline	        在一个声明中设置所有的轮廓属性	
			    outline-color
			    outline-style
			    outline-width
			outline-color	设置轮廓的颜色	
			    color-name
			    hex-number
			    rgb-number
			outline-style	设置轮廓的样式	
			    none	默认。定义无轮廓。
			    dotted	定义点状的轮廓。
			    dashed	定义虚线轮廓。
			    solid	定义实线轮廓。
			    double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
			    groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
			    ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
			    inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
			    outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
			    inherit	规定应该从父元素继承轮廓样式的设置。
			outline-width	设置轮廓的宽度	thin
			    medium
			    thick
			    length
			    inherit
				
				
			初始化css作用
			1.因为浏览器的兼容问题，不同浏览器对标签的默认值不同
			2.可以提高代码质量，保持代码的统一性
		</pre>
		
		
		<div class="box"></div>
		<div class="box1">bsiahhh</div>
		
		<input type="text">
		
		




	<div style="height: 100px;"></div>
</body>

</html>